<!-- src/components/MemberList.vue -->
<script setup>
import { useTaskStore } from '../stores/taskStore'
import { ref } from 'vue'

const store = useTaskStore()
const newMemberName = ref('')
const newMemberCapacity = ref(5)

const addMember = () => {
  if (!newMemberName.value.trim()) {
    alert('请输入成员姓名')
    return
  }
  
  try {
    store.members.push({
      id: Date.now(), // 使用时间戳作为唯一ID
      name: newMemberName.value.trim(),
      capacity: Number(newMemberCapacity.value),
      currentLoad: 0 // 新成员初始工作量为0
    })
    
    // 重置表单
    newMemberName.value = ''
    newMemberCapacity.value = 5
    
    // 可选：添加成功反馈
    console.log('成员添加成功')
  } catch (error) {
    console.error('添加成员失败:', error)
    alert('添加成员失败，请重试')
  }
}

const removeMember = (memberId) => {
  if (!confirm('确定要移除该成员吗？')) return
  
  try {
    // 先取消该成员的所有任务分配
    store.tasks.forEach(task => {
      if (task.assignedTo === memberId) {
        task.assignedTo = null
        
        // 减少原成员的工作量
        const originalMember = store.members.find(m => m.id === memberId)
        if (originalMember && originalMember.currentLoad > 0) {
          originalMember.currentLoad -= 1
        }
      }
    })
    
    // 再移除成员
    store.members = store.members.filter(m => m.id !== memberId)
    
    // 可选：移除成功反馈
    console.log('成员移除成功')
  } catch (error) {
    console.error('移除成员失败:', error)
    alert('移除成员失败，请重试')
  }
}
</script>

<template>
  <div class="member-management">
    <div class="header">
      <h3>团队成员管理</h3>
      <div class="add-member-form">
        <input 
          v-model.trim="newMemberName"
          placeholder="输入成员姓名"
          class="member-input"
          @keyup.enter="addMember"
        >
        <select 
          v-model.number="newMemberCapacity"
          class="capacity-select"
        >
          <option value="5">5个任务/天</option>
          <option value="6">6个任务/天</option>
          <option value="8">8个任务/天</option>
        </select>
        <button 
          @click="addMember"
          class="add-button"
          :disabled="!newMemberName.trim()"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
          添加成员
        </button>
      </div>
    </div>
    
    <div class="member-list">
      <div 
        v-for="member in store.members" 
        :key="member.id"
        class="member-card"
        :class="{ 'overloaded': member.currentLoad > member.capacity }"
      >
        <div class="member-details">
          <span class="member-name">{{ member.name }}</span>
          <span class="member-load">
            <span class="current">{{ member.currentLoad }}</span>
            <span class="separator">/</span>
            <span class="capacity">{{ member.capacity }}</span>
          </span>
        </div>
        <div class="progress-container">
          <div class="progress-bar">
            <div 
              class="progress-fill"
              :style="{ width: `${Math.min(100, (member.currentLoad / member.capacity) * 100)}%` }"
            ></div>
          </div>
        </div>
        <button 
          @click="removeMember(member.id)"
          class="remove-button"
          title="移除成员"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.member-management {
  background: white;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.header {
  margin-bottom: 25px;
}

.header h3 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 1.3rem;
  font-weight: 600;
}

.add-member-form {
  display: flex;
  gap: 10px;
  align-items: center;
}

.member-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: border-color 0.2s;
}

.member-input:focus {
  outline: none;
  border-color: #42b983;
}

.capacity-select {
  padding: 10px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  font-size: 0.9rem;
  background: white;
}

.add-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 15px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.add-button:hover:not(:disabled) {
  background: #3aa876;
}

.add-button:disabled {
  background: #cccccc;
  cursor: not-allowed;
  opacity: 0.7;
}

.member-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.member-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: transform 0.2s;
}

.member-card:hover {
  transform: translateY(-2px);
}

.member-card.overloaded {
  border-left: 4px solid #ff6b6b;
}

.member-details {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
}

.member-name {
  font-weight: 500;
  color: #2c3e50;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-load {
  font-size: 0.9rem;
  margin-left: 10px;
}

.member-load .current {
  font-weight: 600;
  color: #2c3e50;
}

.member-load .separator {
  color: #adb5bd;
  margin: 0 3px;
}

.member-load .capacity {
  color: #6c757d;
}

.progress-container {
  width: 150px;
}

.progress-bar {
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #42b983;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.member-card.overloaded .progress-fill {
  background: #ff6b6b;
}

.remove-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #6c757d;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;
}

.remove-button:hover {
  background: #f1f3f5;
  color: #ff6b6b;
}
</style>